// es6语法
class Enlarge {
    constructor(el, options = {}) {
        // el是指
        this.el = document.querySelector(el)
        this.imgobj = this.el.querySelector('.img')
        this.maskobj = this.el.querySelector('.mask')
        this.enlargeobj = this.el.querySelector('.enlarge')

        this.init()
    }
    init() {
        this.overOut()
        this.maskmove()
        this.tbEnlarge()
    }
    overOut() {
        // this.el.querySelector('.img').onmouseover = () => {
        //     this.el.querySelector('.mask').style.display = 'block'
        //     this.el.querySelector('.enlarge').style.display = 'block'
        // }
        // this.el.querySelector('.img').onmouseout = () => {
        //     this.el.querySelector('.mask').style.display = 'none'
        //     this.el.querySelector('.enlarge').style.display = 'none'
        // }
        this.imgobj.onmouseover = () => this.maskobj.style.display = this.enlargeobj.style.display = 'block'

        this.imgobj.onmouseout = () => this.maskobj.style.display = this.enlargeobj.style.display = 'none '

    }
    maskmove() {
        this.imgobj.onmousemove = (evt) => {
            let e = evt || window.event
            let left = e.pageX - this.imgobj.offsetLeft - this.maskobj.offsetWidth / 2
            let top = e.pageY - this.imgobj.offsetTop - this.maskobj.offsetHeight / 2
            if (left < 0) left = 0
            if (top < 0) top = 0
            let maxLeft = this.imgobj.offsetWidth - this.maskobj.offsetWidth
            let maxTop = this.imgobj.offsetHeight - this.maskobj.offsetHeight
            if (left > maxLeft) left = maxLeft
            if (top > maxTop) top = maxTop

            this.maskobj.style.left = left + 'px'
            this.maskobj.style.top = top + 'px'

            this.tbEnlarge(left, top)
        }
    }
    tbEnlarge(left, top) {
        this.enlargeobj.style.backgroundPosition = `-${left * 2}px -${top * 2}px`
    }
}

export default Enlarge